<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/main2.css">
    <link rel="stylesheet" type="text/css" href="../css/manage.css">
    <link rel="stylesheet" type="text/css" href="../css/buySeat.css">
    <link rel="stylesheet" type="text/css" href="../css/footer.css">

    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../element/css/index.css">
    <script src="../element/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/url.js"></script>
    <script src="../js/controller/headerController.js"></script>
    <script src="../js/service/headerService.js"></script>
    <script src="../js/controller/hallController.js"></script>
    <script src="../js/service/hallService.js"></script>

    <script src="../layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">

    <title>后台管理</title>
</head>

<body>
<!-- 导航栏 -->
<div id="header"></div>

<div id="hall-vue">
    <!-- 主体 -->
    <div class="container">
        <div class="contents">
            <div class="nav-next">
                <div class="nav-title">
                    <h3>后台管理</h3>
                </div>
                <a class="cardId" href="user.html">用户管理</a>
                <a class="cardId" href="movie.html">影片管理</a>
                <a class="cardId" href="cinema.html">影院管理</a>
                <a class="cardId" href="hall.html">影厅管理</a>
                <a class="cardId" href="schedule.html">场次管理</a>
                <a class="cardId" href="comment.html">评论管理</a>
                <a class="cardId" href="order.html">订单管理</a>
            </div>
            <div class="nav-body">
                <!-- 放映厅管理 -->
                <div class="six card">
                    <div>
                        <div class="title">影厅管理</div>
                        <hr/>
                    </div>
                    <!-- 放映厅列表 -->
                    <div class="" v-show="operateCard=='index'">
                        <el-button type="primary" @click="changeOperateCard('add')">添加放映厅</el-button>
                        <!-- 占位符 -->
                        <div style="margin-top: 25px;"></div>

                        <el-table :data="hallList" border style="width: 100%">
                            <el-table-column fixed prop="hallId" label="放映厅ID" width="100"></el-table-column>
                            <el-table-column prop="hallName" label="放映厅名称" width="120"></el-table-column>
                            <el-table-column prop="hallCapacity" label="放映厅容量" width="100"></el-table-column>
                            <el-table-column prop="cinemaName" label="影院名称" width="300"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="changeOperateCard('detail',scope.row.hallId)" type="text"
                                               size="small">查看
                                    </el-button>
                                    <el-button @click="changeOperateCard('update',scope.row.hallId)" type="text"
                                               size="small">编辑
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <div style="margin-top: 20px">
                            <el-pagination background @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :hide-on-single-page="value" :current-page="page.pageNum"
                                           :page-sizes="pageSizes"
                                           :page-size="page.pageSize" :pager-count="pagerCount" :total="page.total"
                                           layout="total, sizes, prev, pager, next, jumper">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-show="operateCard=='add'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>添加放映厅</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <el-button type="success" plain @click="addHall">提交</el-button>
                        <el-button type="warning" plain @click="resetSeat">位置重置</el-button>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <h3 class="addusertitle">影厅信息</h3>
                        <div class="textside">
                            <div class="layui-form-item">
                                <label class="layui-form-label">影厅名称</label>
                                <div class="layui-input-block addusertext">
                                    <input type="text" class="layui-input" v-model="hall.hallName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影厅类型</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="hall.hallTypeId">
                                        <option v-show="hall.hallTypeId==0" value="0">请选择类型</option>
                                        <option v-for="hallType in hallTypeList" :value="hallType.hallTypeId">
                                            {{hallType.hallTypeName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">归属影院</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="hall.cinemaId">
                                        <option v-show="hall.cinemaId==0" value="0">请选择影院</option>
                                        <option v-for="cinema in cinemaList" :value="cinema.cinemaId">
                                            {{cinema.cinemaName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div>
                            <!--占位符-->
                            <div style="margin-top: 200px"></div>

                            <el-divider content-position="left" style="margin-top: 20px">影片的布局设置</el-divider>
                            <span style="display:inline-block;">共计</span>
                            <div style="display:inline-block; margin-left: 10px !important; width: 100px;">
                                <input type="number" class="layui-input" v-model.number="layout.columnTotal">
                            </div>
                            <span style="margin-left:10px">排，每排布置</span>
                            <div style="display:inline-block; margin-left: 10px !important; width: 100px;">
                                <input type="number" class="layui-input" v-model.number="layout.seatTotal">
                            </div>
                            <span style="margin-left:10px">个基础座位</span>
                            <div style="color: red">
                                <div style="margin-top: 20px">
                                    *提示:如果想要在座位的基础数量上进行微调，请勾选复选框，默认会在正对荧幕的右侧新增一个座位
                                </div>
                            </div>
                            <div>
                                <!--占位符-->
                                <div style="margin-top: 40px"></div>

                                <el-divider>布局预览</el-divider>
                                <div class="main">
                                    <div class="hall">
                                        <div class="seats-block">
                                            <div class="row-id-container">
                                                <span class="row-id" v-for="columnIndex of layout.columnTotal">
                                                    <input type="checkbox" name="checkbox" :value="columnIndex"
                                                           @click="adjustSeat($event.target)">
                                                    {{columnIndex}}
                                                </span>
                                            </div>
                                            <div class="seats-container">
                                                <div class="screen-container">
                                                    <div class="screen">银幕中央</div>
                                                    <div class="c-screen-line"></div>
                                                </div>
                                                <div class="seats-wrapper">
                                                    <div class="row" v-for="columnIndex of layout.columnTotal">
                                                        <span class="seat"
                                                              :class="[layout.checkSeatIndexs.includes(columnIndex+'~'+seatIndex) ? 'empty' : 'selectable']"
                                                              v-for="seatIndex of layout.seatTotal"
                                                              @click="checkSeat(columnIndex,seatIndex)">
                                                        </span>
                                                        <span class="seat"
                                                              :class="[layout.checkSeatIndexs.includes(columnIndex+'~'+(layout.seatTotal.length+1)) ? 'empty' : 'selectable']"
                                                              v-show="layout.adjustColumnIndex.includes(columnIndex)"
                                                              @click="checkSeat(columnIndex,layout.seatTotal.length+1)">
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="operateCard=='update'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>修改放映厅</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <el-button type="success" plain @click="updateHall">确认修改</el-button>
                        <el-button type="warning" plain @click="resetSeat" v-show="hallDetail.layoutList.length==0">
                            位置重置
                        </el-button>
                        <el-button type="danger" plain @click="removeLayoutByHall(hallDetail.hall.hallId)"
                                   v-show="hallDetail.layoutList.length>0">
                            删除布局
                        </el-button>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <h3 class="addusertitle">影厅信息</h3>
                        <div class="textside">
                            <div class="layui-form-item">
                                <label class="layui-form-label">影厅名称</label>
                                <div class="layui-input-block addusertext">
                                    <input type="text" class="layui-input" v-model="hallDetail.hall.hallName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影厅类型</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="hallDetail.hall.hallTypeId">
                                        <option v-for="hallType in hallTypeList" :value="hallType.hallTypeId">
                                            {{hallType.hallTypeName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">归属影院</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="hallDetail.hall.cinemaId">
                                        <option v-for="cinema in cinemaList" :value="cinema.cinemaId">
                                            {{cinema.cinemaName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div>
                            <!--占位符-->
                            <div style="margin-top: 200px"></div>

                            <div v-show="hallDetail.layoutList.length==0">
                                <el-divider content-position="left" style="margin-top: 20px">影片的布局设置</el-divider>
                                <span style="display:inline-block;">共计</span>
                                <div style="display:inline-block; margin-left: 10px !important; width: 100px;">
                                    <input type="number" class="layui-input" v-model.number="layout.columnTotal">
                                </div>
                                <span style="margin-left:10px">排，每排布置</span>
                                <div style="display:inline-block; margin-left: 10px !important; width: 100px;">
                                    <input type="number" class="layui-input" v-model.number="layout.seatTotal">
                                </div>
                                <span style="margin-left:10px">个基础座位</span>
                                <div style="color: red">
                                    <div style="margin-top: 20px">
                                        *提示:如果想要在座位的基础数量上进行微调，请勾选复选框，默认会在正对荧幕的右侧新增一个座位
                                    </div>
                                </div>
                                <div>
                                    <!--占位符-->
                                    <div style="margin-top: 40px"></div>

                                    <el-divider>布局预览</el-divider>
                                    <div class="main">
                                        <div class="hall">
                                            <div class="seats-block">
                                                <div class="row-id-container">
                                                <span class="row-id" v-for="columnIndex of layout.columnTotal">
                                                    <input type="checkbox" name="checkbox" :value="columnIndex"
                                                           @click="adjustSeat($event.target)">
                                                    {{columnIndex}}
                                                </span>
                                                </div>
                                                <div class="seats-container">
                                                    <div class="screen-container">
                                                        <div class="screen">银幕中央</div>
                                                        <div class="c-screen-line"></div>
                                                    </div>
                                                    <div class="seats-wrapper">
                                                        <div class="row" v-for="columnIndex of layout.columnTotal">
                                                        <span class="seat"
                                                              :class="[layout.checkSeatIndexs.includes(columnIndex+'~'+seatIndex) ? 'empty' : 'selectable']"
                                                              v-for="seatIndex of layout.seatTotal"
                                                              @click="checkSeat(columnIndex,seatIndex)">
                                                        </span>
                                                            <span class="seat"
                                                                  :class="[layout.checkSeatIndexs.includes(columnIndex+'~'+(layout.seatTotal.length+1)) ? 'empty' : 'selectable']"
                                                                  v-show="layout.adjustColumnIndex.includes(columnIndex)"
                                                                  @click="checkSeat(columnIndex,layout.seatTotal.length+1)">
                                                        </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="hallDetail.layoutList.length>0">
                                <!--占位符-->
                                <div style="margin-top: 40px"></div>

                                <el-divider>布局预览</el-divider>
                                <div style="color: red">
                                    *温馨提示：影厅的布局已经定型，无法被修改！如果想要改变布局，请点击删除布局
                                </div>
                                <div class="main" style="margin-top: 10px">
                                    <div class="hall">
                                        <div class="seats-block">
                                            <div class="row-id-container">
                                                <span class="row-id" v-for="columnIndex in hallDetail.layoutList">
                                                    {{columnIndex.seatColumnId}}
                                                </span>
                                            </div>
                                            <div class="seats-container">
                                                <div class="screen-container">
                                                    <div class="screen">银幕中央</div>
                                                    <div class="c-screen-line"></div>
                                                </div>
                                                <div class="seats-wrapper">
                                                    <div class="row" v-for="columnIndex in hallDetail.layoutList">
                                                        <span class="seat"
                                                              :class="{empty:seatIndex=='0',selectable:seatIndex=='2'}"
                                                              v-for="seatIndex in columnIndex.seatStateIds">
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="operateCard=='detail'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>放映厅详情</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 50px"></div>

                        <h3 class="addusertitle">基本信息</h3>
                        <div class="textside">
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">影厅名称：</span>
                                <span>{{hallDetail.hall.hallName}}</span>
                            </div>
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">影厅类型：</span>
                                <span v-for="hallType in hallTypeList">
                                    <span v-show="hallDetail.hall.hallTypeId==hallType.hallTypeId">{{hallType.hallTypeName}}</span>
                                </span>
                            </div>
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">归属影院：</span>
                                <span v-for="cinema in cinemaList">
                                    <span v-show="hallDetail.hall.cinemaId==cinema.cinemaId">{{cinema.cinemaName}}</span>
                                </span>
                            </div>
                        </div>
                        <div>
                            <!--占位符-->
                            <div style="margin-top: 140px"></div>

                            <div v-show="hallDetail.layoutList.length>0">
                                <el-divider>座位的布局</el-divider>
                                <div class="main" style="margin-top: 10px">
                                    <div class="hall">
                                        <div class="seats-block">
                                            <div class="row-id-container">
                                                <span class="row-id" v-for="columnIndex in hallDetail.layoutList">
                                                    {{columnIndex.seatColumnId}}
                                                </span>
                                            </div>
                                            <div class="seats-container">
                                                <div class="screen-container">
                                                    <div class="screen">银幕中央</div>
                                                    <div class="c-screen-line"></div>
                                                </div>
                                                <div class="seats-wrapper">
                                                    <div class="row" v-for="columnIndex in hallDetail.layoutList">
                                                        <span class="seat"
                                                              :class="{empty:seatIndex=='0',selectable:seatIndex=='2'}"
                                                              v-for="seatIndex in columnIndex.seatStateIds">
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 脚 -->
<div id="footer"></div>

<!--加载页头-->
<script>
    // 当文档加载完成后执行
    $(document).ready(function () {
        // 加载页头
        $("#header").load("header.html")
    })
</script>

<script>
    var vueapp = new Vue({
        el: "#hall-vue",
        data: {
            hallList: [],               // 记录当前页的所有影厅信息
            hallTypeList: [],           // 记录所有的影厅类型用于下拉框
            cinemaList: [],             // 记录所有的影院数据用于下拉框
            operateCard: 'index',       // 显示的卡片功能 'index'表示主界面，'add'表示添加, 'update'表示修改等
            hall: {
                hallName: "",           // 影厅的名称
                hallTypeId: 0,          // 影厅的类型ID
                cinemaId: 0,            // 归属的影院ID
                hallCapacity: 0,        // 影厅的容量
                layout: [],             // 影厅布局信息
            },
            layout: {
                columnTotal: 0,         // 记录总共有多少列
                seatTotal: 1,           // 记录每列有多少个座位
                checkSeat: {},          // 标记选中的座位信息（用来定位座位）,选中代表不存在的位置
                checkSeatIndexs: [],    // 选中座位的所有索引值
                adjustColumnIndex: [],  // 需要进行微调的列的索引集
            },
            hallDetail: {
                hall: '',               // 根据影厅ID查询到的影厅基本信息
                layoutList: [],         // 根据影厅ID查询到的影厅布局
                hallType: '',           // 根据影厅ID查询到的影厅类型
            },

            page: "",					// 分页参数
            value: true,				// 是否开启分页隐藏功能
            pageSizes: [3, 6, 9, 12],   // 每页条数选项列表
            pagerCount: 5				// 导航按钮数
        },
        watch: {
            // 监听卡片的变化
            "operateCard": hall_yh_service.watchCard,
        },
        methods: {
            findHallAll: hall_yh_controller.findHallAll,
            findHallTypeAll: hall_yh_controller.findHallTypeAll,
            findCinemaAll: hall_yh_controller.findCinemaAll,
            addHall: hall_yh_controller.addHall,
            updateHall: hall_yh_controller.updateHall,
            findHallById: hall_yh_controller.findHallById,
            removeLayoutByHall: hall_yh_controller.removeLayoutByHall,
            changeOperateCard: hall_yh_service.changeOperateCard,
            checkSeat: hall_yh_service.checkSeat,
            resetSeat: hall_yh_service.resetSeat,
            adjustSeat: hall_yh_service.adjustSeat,
            calculateLayout: hall_yh_service.calculateLayout,
            initLayoutData: hall_yh_service.initLayoutData,

            // 分页功能 改变下拉框中每页的记录数时触发
            handleSizeChange: hall_yh_service.handleSizeChange,
            // 分页功能 点击导航按钮时触发
            handleCurrentChange: hall_yh_service.handleCurrentChange,
        },
        created: hall_yh_service.created,
    })
</script>
</body>

</html>